<template>
  <div class="positionDetail">
    <div style="width: 1200px; padding: 20px 0; margin: 0 auto">
      <a-breadcrumb separator=">">
        <a-breadcrumb-item href="" @click.native="$router.push('/')"
          >首页</a-breadcrumb-item
        >
        <a-breadcrumb-item
          href=""
          @click.native="$router.push('/employment/home')"
        >
          创业就业
        </a-breadcrumb-item>
        <a-breadcrumb-item
          href=""
          @click.native="$router.push('/employment/positionList')"
        >
          招聘职位
        </a-breadcrumb-item>
        <a-breadcrumb-item style="color: #ffbe37">职位详情</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="workDetail" v-if="jobDetail">
      <div class="titleStar">
        <p class="title" v-show="jobDetail">{{ jobDetail.name }}</p>
        <!-- <div
          class="star"
          v-show="!jobDetail.collectFlag"
          @click="collectFlag(jobDetail.jobCode)"
        >
          <img src="@/assets/image/employment/star.png" alt="" />
          <p>收藏</p>
        </div>
        <div
          class="star"
          v-show="jobDetail.collectFlag"
          @click="collectFlag(jobDetail.jobCode)"
        >
          <a-icon type="star" style="color: #FFBE37" theme="filled" />
          <p>已收藏</p>
        </div> -->
      </div>
      <div class="msage">
        <div class="left">
          <div class="nav">
            <p>{{ jobDetail.degree }}</p>
            <p class="fgx" v-show="jobDetail.degree">｜</p>
            <p>{{ jobDetail.workExper }}</p>
            <p class="fgx" v-show="jobDetail.workExper">｜</p>
            <p>{{ jobDetail.disaType }}</p>
            <p class="fgx" v-show="jobDetail.disaType && jobDetail.nature">|</p>
            <p>{{ jobDetail.nature }}</p>
          </div>
          <div class="welfareTime" v-if="jobDetail.welfare">
            <p
              class="squareLabel"
              v-for="(item, index) in jobDetail.welfare.split('、')"
              :key="index"
            >
              {{ item }}
            </p>
          </div>
          <p class="time" v-show="jobDetail.createDate">
            {{ jobDetail.publicTime }} 发布
          </p>
          <p class="policies" v-show="jobDetail.webName">
            相关政策：<span
              ><span v-show="jobDetail.policies == 2">{{
                jobDetail.webName
              }}</span>
              <a v-show="jobDetail.policies == 1" :href="jobDetail.webUrl">{{
                jobDetail.webName
              }}</a></span
            >
          </p>
        </div>
        <div class="right">
          <p class="maney" v-show="jobDetail.payType == 1">
            {{ jobDetail.minPay
            }}<span v-show="jobDetail.minPay && jobDetail.maxPay">K-</span
            >{{ jobDetail.maxPay
            }}<span v-show="jobDetail.minPay && jobDetail.maxPay">K</span>/月
          </p>
          <p class="maney" v-show="jobDetail.payType == 2">
            {{ jobDetail.maxPay }}元/日
          </p>
          <p class="maney" v-show="jobDetail.payType == 3">面议</p>
          <div class="functions">
            <div class="collection" @click="collectFlag(jobDetail.jobCode)">
              <a-icon type="star" style="color: #ffbe37" />
              <span>
                {{ !jobDetail.collectFlag ? "收藏" : "已收藏" }}
              </span>
            </div>
            <p :class="jobDetail.resumeFlag == 1?'btn ccc':'btn'" @click="resumeSave">{{jobDetail.resumeFlag == 1?'已申请':'立即投递'}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="workMsg" v-if="jobDetail">
      <div class="left">
        <a-tabs default-active-key="1" size="large">
          <a-tab-pane key="1" tab="职位描述">
            <p
              class="content"
              v-show="jobDetail.jobDesc"
              v-html="jobDetail.jobDesc"
            ></p>
          </a-tab-pane>
        </a-tabs>

        <div class="dlex1-div" v-show="jobDetail.workAddress">
          <div class="yellowBar"></div>
          <span>工作地点</span>
        </div>
        <p class="workCity">{{ jobDetail.workAddress }}</p>
        <div class="dlex1-div" v-show="jobDetail.similarCouseList.length">
          <div class="yellowBar"></div>
          <span>相关课程</span>
        </div>
        <div
          class="classDetail"
          @click="getJumpVideo(item)"
          v-for="(item, index) in jobDetail.similarCouseList"
          :key="index"
        >
          <div class="img" v-show="item.cover">
            <img
              :src="imageWebUrl + item.cover"
              @error="$event.target.src = GLOBAL.defaultIconImg"
              alt=""
              class="workImg"
            />
          </div>
          <div class="xaingmumsage">
            <p class="title">
              {{ item.name }}
            </p>
            <!-- <div class="navs">
              <div class="navlist" v-for="(i, j) in item.tagList" :key="j" v-show="i"><div>{{ i }}</div></div>
            </div> -->
            <p class="characteristic" v-html="item.detail"></p>
            <div class="bottom">
              <!-- <p class="policy" v-show="item.webName">
                相关政策：<span
                  ><span v-show="item.policy == 2">{{ item.webName }}</span
                  ><a :href="item.webUrl" target="_blank" v-show="item.policy == 1">{{
                    item.webName
                  }}</a></span
                >
              </p>
              <p class="view" v-show="item.studyNum">
                {{ item.studyNum }}人已学习
              </p> -->
              <div style="margin-top: 8px" class="dlex2-div">
                <span class="redTxt" v-if="item.freeFlag == 'N'">
                  <p class="redTxt" style="font-size: 12px">￥</p>
                  {{ item.cost }}
                </span>

                <span class="redTxt" v-if="item.freeFlag == 'Y'">免费</span>
                <span class="redTxt" v-if="item.freeFlag == 'X'">限时免费</span>
              </div>
            </div>
          </div>
        </div>
        <div class="dlex1-div" v-show="jobDetail.comDesc">
          <div class="yellowBar"></div>
          <span>公司信息</span>
        </div>
        <p class="gsmsg">{{ jobDetail.comDesc }}</p>
        <div
          class="dlex1-div"
          v-show="
            jobDetail.comOtherJobList &&
            jobDetail.comOtherJobList.length &&
            jobDetail.comDesc
          "
        >
          <div class="yellowBar"></div>
          <span>该公司其他岗位</span>
        </div>
        <ul class="notherworkList" v-show="jobDetail.comDesc">
          <li
            v-for="(item, index) in jobDetail.comOtherJobList"
            :key="index"
            @click="
              $router.push('/employment/positionDetail?jobCode=' + item.jobCode)
            "
          >
            <div class="workmsg">
              <p class="workTitle">{{ item.name }}</p>
              <div class="welfare">
                <p class="maney" v-show="item.payType == 1">
                  {{ item.minPay
                  }}<span v-show="item.minPay && item.maxPay">K-</span
                  >{{ item.maxPay
                  }}<span v-show="item.minPay && item.maxPay">K</span>/月
                </p>
                <p class="maney" v-show="item.payType == 2">
                  {{ item.maxPay }}元/日
                </p>
                <p class="maney" v-show="item.payType == 3">面议</p>
                <p>{{ item.degree }}</p>
                <p class="fgx" v-show="item.degree">|</p>
                <p>{{ item.workExper }}</p>
                <p class="fgx" v-show="item.workExper">|</p>
                <p>{{ item.disaType }}</p>
              </div>
              <div class="navs" v-if="item.welfare">
                <p
                  v-for="(item, index) in item.welfare.split('、')"
                  :key="index"
                  v-show="index < 3"
                >
                  {{ item }}
                </p>
              </div>
            </div>
            <div
              class="relevantmsg"
              v-show="
                item.similarCouseList &&
                item.similarCouseList.length &&
                item.similarCouseList[0].name
              "
            >
              <div class="class">
                <p>相关课程：</p>
                <div class="classLink">
                  <p v-for="(i, j) in item.similarCouseList" :key="j">
                    {{ i.name }}
                  </p>
                </div>
              </div>
              <div class="policy" v-show="item.webName">
                <p>
                  相关政策：<span
                    ><span v-show="item.policy == 2">{{ item.webName }}</span
                    ><a
                      :href="item.webUrl"
                      target="_blank"
                      v-show="item.policy == 1"
                      >{{ item.webName }}</a
                    ></span
                  >
                </p>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="right">
        <div class="title" v-show="jobDetail.comCode">
          <img src="@/assets/image/employment/gsmsg.png" alt="" />
          <p>公司基本信息</p>
        </div>
        <div class="layer" style="margin-top: 35px">
          <div
            class="gsmsg"
            v-show="jobDetail.comCode"
            @click="
              $router.push(
                '/employment/detailsBusiness?id=' + jobDetail.comCode
              )
            "
          >
            <div class="message">
              <img
                :src="imageWebUrl + jobDetail.comLogo"
                @error="$event.target.src = GLOBAL.defaultIconImg"
                alt=""
              />
              <div class="mess">
                <p class="title1">{{ jobDetail.comName }}</p>
                <p class="type" v-show="jobDetail.comNature">
                  性质：{{ jobDetail.comNature }}
                </p>
                <p class="hangye" v-show="jobDetail.comTrade">
                  行业：{{ jobDetail.comTrade }}
                </p>
                <p class="bigS" v-show="jobDetail.comScale">
                  规模：{{ jobDetail.comScale }}
                </p>
              </div>
            </div>
            <p class="place" v-show="jobDetail.workAddress">
              地点：{{ jobDetail.workAddress }}
            </p>
          </div>
        </div>

        <div
          class="title"
          v-show="jobDetail.similarJobList && jobDetail.similarJobList.length"
        >
          <img src="@/assets/image/employment/workicon.png" alt="" />
          <p>相似职位</p>
        </div>
        <div class="layer">
          <ul class="workList">
            <li v-for="(item, index) in jobDetail.similarJobList" :key="index">
              <div
                class="workmsg"
                @click="
                  $router.push(
                    '/employment/positionDetail?jobCode=' + item.jobCode
                  )
                "
              >
                <div class="titleManey">
                  <p class="workTitle">{{ item.name }}</p>
                  <p class="maney" v-show="item.payType == 1">
                    {{ item.minPay
                    }}<span v-show="item.minPay && item.maxPay">K-</span
                    >{{ item.maxPay
                    }}<span v-show="item.minPay && item.maxPay">K</span>/月
                  </p>
                  <p class="maney" v-show="item.payType == 2">
                    {{ item.maxPay }}元/日
                  </p>
                  <p class="maney" v-show="item.payType == 3">面议</p>
                </div>

                <div class="welfare">
                  <p>{{ item.degree }}</p>
                  <p class="fgx" v-show="item.degree">|</p>
                  <p>{{ item.workExper }}</p>
                  <p class="fgx" v-show="item.workExper">|</p>
                  <p>{{ item.disaType }}</p>
                </div>
              </div>
              <div
                class="gsmsg"
                @click="
                  $router.push('/education/detailsBusiness?id=' + item.comCode)
                "
                v-show="item.comCode"
              >
                <img
                  :src="imageWebUrl + item.comLogo"
                  @error="$event.target.src = GLOBAL.defaultIconImg"
                  alt=""
                />
                <div class="msg">
                  <p
                    class="title1"
                    :style="{
                      'margin-top':
                        item.comNature || item.comTrade || item.comScale
                          ? 0
                          : '15px',
                    }"
                  >
                    {{ item.comName }}
                  </p>
                  <p class="navs">
                    {{ item.comNature }} <span v-if="item.comNature">|</span>
                    {{ item.comTrade }} <span v-if="item.comTrade">|</span>
                    {{ item.comScale }}
                  </p>
                </div>
              </div>
              <div
                class="relevantmsg"
                v-if="
                  (item.similarCouseList && item.similarCouseList.length) ||
                  item.webName
                "
              >
                <div
                  class="class"
                  v-show="item.similarCouseList && item.similarCouseList.length"
                >
                  <p>相关课程：</p>
                  <div class="classLink">
                    <p
                      v-for="(i, j) in item.similarCouseList"
                      @click="getJumpVideo(i)"
                      :key="j"
                    >
                      {{ i.name }}
                    </p>
                  </div>
                </div>
                <div class="policy" v-show="item.webName">
                  <p>
                    相关政策：<span
                      ><span v-show="item.policy == 2">{{ item.webName }}</span
                      ><a
                        :href="item.webUrl"
                        target="_blank"
                        v-show="item.policy == 1"
                        >{{ item.webName }}</a
                      ></span
                    >
                  </p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 未登录 -->
    <a-modal
      :closable="false"
      style="width: 550px"
      dialogClass="success"
      :maskClosable="false"
      :visible="visible"
    >
      <template #footer>
        <a-button size="large" style="" @click="visible = false">取消</a-button>
        <a-button size="large" type="primary" @click="goLogin">去登录</a-button>
      </template>
      <template #title>
        <a-icon style="color: #ffbe37" type="info-circle" />
        <span style="display: inline-block; margin-left: 10px; color: #333333"
          >提示信息</span
        >
      </template>
      <div class="successModel">
        <span>抱歉！请您先登录后操作。</span>
      </div>
    </a-modal>
    <!-- 非残疾人。 -->
    <a-modal
      :closable="false"
      style="width: 550px"
      dialogClass="success"
      :maskClosable="false"
      :visible="distryvisible"
    >
      <template #footer>
        <a-button size="large" type="primary" @click="distryvisible = false"
          >我知道了</a-button
        >
      </template>
      <template #title>
        <a-icon style="color: #ffbe37" type="info-circle" />
        <span style="display: inline-block; margin-left: 10px; color: #333333"
          >提示信息</span
        >
      </template>
      <div class="successModel">
        <span
          >该职位仅限残疾人投递，若您为残疾人士，请先在个人中心认证残疾人身份。</span
        >
      </div>
    </a-modal>
    <!-- 投递确认 -->
    <a-modal
      :closable="false"
      style="width: 550px"
      dialogClass="success"
      :maskClosable="false"
      :visible="enterVisible"
    >
      <template #footer>
        <a-button size="large" style="" @click="enterVisible = false"
          >取消</a-button
        >
        <a-button size="large" type="primary" @click="saveResume"
          >确定</a-button
        >
      </template>
      <template #title>
        <a-icon style="color: #ffbe37" type="info-circle" />
        <span style="display: inline-block; margin-left: 10px; color: #333333"
          >提示信息</span
        >
      </template>
      <div class="successModel">
        <span
          >是否确定投递该职位？确定后会把您的简历和联系方式发送给企业，若匹配企业用人需求将会主动与您取得联系。</span
        >
      </div>
    </a-modal>
    <!-- 为完善简历 -->
    <a-modal
      :closable="false"
      style="width: 550px"
      dialogClass="success"
      :maskClosable="false"
      :visible="resumevisible"
    >
      <template #footer>
        <a-button size="large" style="" @click="resumevisible = false"
          >取消</a-button
        >
        <a-button size="large" type="primary" @click="$router.push('/MyResume')"
          >编辑简历</a-button
        >
      </template>
      <template #title>
        <a-icon style="color: #ffbe37" type="info-circle" />
        <span style="display: inline-block; margin-left: 10px; color: #333333"
          >提示信息</span
        >
      </template>
      <div class="successModel">
        <span>请编辑简历</span>
      </div>
    </a-modal>
    <Loading v-show="onLoading"></Loading>
    <Login ref="login" />
  </div>
</template>

<script>
import Login from "@/components/popup/login/index.vue";
export default {
  components: { Login },
  data() {
    return {
      jobCode: "",
      jobDetail: null,
      visible: false, //未登录
      resumevisible: false, //未完善简历
      enterVisible: false, //确认投递
      distryvisible: false, //非残疾人
      resumeNo: "", //简历id
      onLoading: false,
    };
  },
  watch: {
    $route(e) {
      this.jobCode = e.query.jobCode;
      this.getJobDetail();
    },
  },
  mounted() {
    this.jobCode = this.$route.query.jobCode;
    this.getJobDetail();
  },
  methods: {
    // 跳转视频播放页
    getJumpVideo(e) {
      this.$router.push(
        "/video/detailsVideo?courseNo=" +
          e.courseNo +
          "&learnedTime=" +
          e.learnedTime
      );
    },
    // 简历投递
    resumeSave() {
      if (this.jobDetail.resumeFlag == 1) {
      } else if (!this.$store.state.token) {
        this.$refs["login"].tabIndex = 0;
        this.$refs["login"].tabType = 0;
        this.$refs["login"].maskClosable = true;
        this.$refs["login"].visible = true;
      } else if (this.$store.state.roleType != 2) {
        this.distryvisible = true;
      } else {
        this.$ajax({
          url: "/entrepreneurial/resumeinfo/resumeInfo",
          method: "post",
          params: {},
        }).then((res) => {
          if (res.code == 200) {
            if (res.data && res.data.phone && res.data.jobIntenList && res.data.jobIntenList.length) {
              // 如果有简历编码 》 投递简历
              this.enterVisible = true;
              this.resumeNo = res.data.resumeNo;
            } else {
              this.resumevisible = true;
            }
          } else {
            this.$message.error(res.msg);
          }
        });
      }
    },
    // 简历投递
    saveResume() {
      this.$ajax({
        url: "/entrepreneurial/resumedelivery/save",
        method: "post",
        params: {
          resumeNo: this.resumeNo, // 简历编码
          jobCode: this.jobCode, // 职位编码
        },
      }).then((req) => {
        this.enterVisible = false;
        if (req.code == 200) {
          this.$message.success("简历投递成功！");
          this.getJobDetail();
        } else {
          this.$message.error(req.msg);
        }
      });
    },
    // 登录弹框
    goLogin() {
      this.visible = false;
    },
    // 收藏职位
    collectFlag(e) {
      if (this.$store.state.token) {
        this.$ajax({
          url: "/user/usercollect/save",
          method: "post",
          params: {
            collectType: 5,
            collectCode: e,
          },
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success("操作成功");
            this.getJobDetail();
          } else {
            this.$message.error(res.msg);
          }
        });
      } else {
        // this.visible = true;
        this.$refs["login"].tabIndex = 0;
        this.$refs["login"].tabType = 0;
        this.$refs["login"].maskClosable = true;
        this.$refs["login"].visible = true;
      }
    },
    // 获取职位详情
    getJobDetail() {
      this.onLoading = true;
      this.$ajax({
        url: "/entrepreneurial/comjob/detail?jobCode=" + this.jobCode,
        method: "post",
      }).then((res) => {
        if (res.code == 200) {
          this.onLoading = false;
          this.jobDetail = res.data;
        } else {
          this.onLoading = false;
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.successModel {
  padding-left: 20px;
}
/deep/.ant-modal-header {
  border-bottom: 0;
}
/deep/.ant-modal-footer {
  border-top: 0;
}
.positionDetail {
  background-color: #f8f8f8;
  // padding-top: 150px;
  padding-bottom: 50px;
  .workDetail {
    width: 1200px;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 30px 30px 30px 20px;
    .titleStar {
      display: flex;
      align-items: center;
      .title {
        color: #333333;
        font-size: 22px;
        line-height: 30px;
        margin-right: 40px;
      }
      .star {
        cursor: pointer;
        display: flex;
        align-items: center;
        p {
          color: #333333;
          font-size: 14px;
          line-height: 20px;
          margin-left: 2px;
        }
        img {
          width: 18px;
          height: 18px;
        }
      }
    }
    .msage {
      display: flex;
      justify-content: space-between;
      margin-top: 24px;
      .left {
        .nav {
          display: flex;
          p {
            color: #666666;
            font-size: 15px;
            line-height: 21px;
          }
          .fgx {
            margin: 0 15px;
          }
        }
        .welfareTime {
          margin-top: 17px;
          display: flex;
          align-items: center;
          .nav {
            padding: 0 15px;
            border: 1px solid #ffbe37;
            color: #ffbe37;
            margin-right: 40px;
            font-size: 13px;
            line-height: 18px;
          }
        }
        .time {
          margin-top: 20px;
          color: #666666;
          font-size: 14px;
          line-height: 20px;
        }
        .policies {
          margin-top: 16px;
          color: #333333;
          font-size: 13px;
          line-height: 18px;
          span {
            color: #0d4fae;
            // text-decoration: underline;
          }
        }
      }
      .right {
        .maney {
          // width: 146px;
          text-align: right;
          color: #ffbe37;
          font-size: 22px;
          line-height: 30px;
        }
        .functions {
          display: flex;
          .collection {
            max-height: 40px;
            margin: 0 auto;
            margin-top: 13px;
            display: flex;
            align-items: center;
            span {
              font-size: 14px;
              font-family: PingFang SC;
              color: #333333;
              margin-left: 4px;
            }
          }
        }
        .btn {
          margin-left: 13px;
          border-radius: 4px;
          cursor: pointer;
          margin-top: 13px;
          width: 146px;
          text-align: center;
          line-height: 38px;
          color: #333333;
          background-color: #ffbe37;
          font-size: 14px;
          font-weight: bold;
        }
        .ccc {
          background-color: #cccccc;
          cursor: auto;
        }
      }
    }
  }
  .workMsg {
    width: 1200px;
    margin: 0 auto;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .left {
      width: 840px;
      padding: 33px 16px;
      background-color: #ffffff;
      .dlex1-div {
        padding: 0 16px;
        margin-bottom: 23px;
        span {
          font-size: 18px;
          line-height: 25px;
          font-weight: bold;
        }
      }
      .content {
        padding: 0 16px;
        color: #333333;
        font-size: 16px;
        line-height: 28px;
        margin-bottom: 32px;
      }
      .workCity {
        padding: 0 16px;
        color: #ffbe37;
        font-size: 18px;
        line-height: 25px;
        margin-bottom: 32px;
      }
      .gsmsg {
        cursor: pointer;
        padding: 0 16px;
        color: #333333;
        font-size: 16px;
        line-height: 28px;
        margin-bottom: 32px;
      }
      .classDetail {
        cursor: pointer;
        background-color: #ffffff;
        display: flex;
        margin-bottom: 32px;
        padding: 12px 24px 12px 12px;
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
        .img {
          width: 271px;
          height: 187px;
          overflow: hidden;
          .workImg {
            width: 271px;
            height: 187px;
            transition: transform 0.5s linear;
          }
          .workImg:hover {
            transform: scale(1.1);
          }
        }
        .xaingmumsage {
          flex: 1;
          padding-left: 32px;
          padding-top: 25px;
          .title {
            color: #333333;
            font-size: 20px;
            line-height: 24px;
            font-weight: bold;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .navs {
            display: flex;
            margin-top: 16px;
            .navlist {
              background-color: #ffbe37;
              padding: 2.5px 10px 1px;
              height: 23px;
              margin-right: 16px;
              text-align: center;
              transform: skewX(-25deg);
            }
            .navlist > div {
              color: #232d32;
              transform: skewX(25deg);
              font-size: 12px;
              font-weight: bold;
              line-height: 17px;
              white-space: nowrap;
            }
            p {
              padding: 0 15px;
              border: 1px solid #ffbe37;
              line-height: 23px;
              margin-right: 16px;
              color: #ffbe37;
              font-size: 12px;
            }
          }
          .characteristic {
            color: #333333;
            font-size: 15px;
            line-height: 24px;
            margin-top: 18px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            span {
              font-weight: bold;
            }
          }
          .bottom {
            display: flex;
            align-items: center;
            margin-top: 8px;
            justify-content: space-between;
            .policy {
              color: #000000;
              font-size: 12px;
              line-height: 17px;
              span {
                color: #0d4fae;
                text-decoration: underline;
              }
            }
            .view {
              color: #666666;
              font-size: 13px;
              line-height: 17px;
            }
          }
        }
      }
      .notherworkList {
        margin-top: 20px;
        li {
          cursor: pointer;
          box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.07);
          background-color: #ffffff;
          display: flex;
          padding: 30px 20px;
          align-items: center;
          margin-bottom: 20px;
          .workmsg {
            width: 449px;
            .workTitle {
              color: #333333;
              font-size: 18px;
              line-height: 25px;
              font-weight: bold;
            }
            .welfare {
              display: flex;
              align-items: center;
              margin-top: 16px;
              .maney {
                color: #ffbe37;
                font-size: 18px;
                line-height: 25px;
                margin-right: 24px;
              }
              P {
                color: #666666;
                font-size: 12px;
                line-height: 17px;
              }
              .fgx {
                margin: 0 15px;
              }
            }
            .navs {
              display: flex;
              margin-top: 15px;
              p {
                padding: 0 15px;
                border: 1px solid #ffbe37;
                line-height: 24px;
                margin-right: 16px;
                font-size: 12px;
                color: #ffbe37;
              }
            }
          }
          .relevantmsg {
            height: 78px;
            padding-left: 40px;
            margin-top: 31px;
            border-left: 2px solid #eeeeee;
            .class {
              display: flex;
              p {
                color: #333333;
                font-size: 14px;
                line-height: 26px;
              }
              .classLink {
                p {
                  width: 200px;
                  color: #0d4fae;
                  text-decoration: underline;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
              }
            }
            .policy {
              margin-top: 8px;
              color: #000000;
              font-size: 14px;
              line-height: 17px;
              span {
                color: #0d4fae;
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
    .right {
      width: 340px;
      background-color: #ffffff;
      .layer {
        padding: 0 16px;
      }
      .title {
        display: flex;
        width: 100%;
        height: 40px;
        padding: 10px 16px;
        background: #232d32;
        img {
          width: 18px;
          height: 18px;
          display: block;
          margin-right: 6px;
        }
        p {
          color: #ffffff;
          font-size: 14px;
          line-height: 20px;
          font-weight: bold;
        }
      }
      .gsmsg {
        cursor: pointer;
        margin-bottom: 24px;

        // border-bottom: 1px solid #eeeeee;
        .message {
          display: flex;
          img {
            width: 100px;
            height: 100px;
          }
          .mess {
            flex: 1;
            padding-left: 16px;
            .title1 {
              color: #333333;
              font-size: 16px;
              line-height: 22px;
              font-family: PingFang SC;
              font-weight: 600;
              margin-bottom: 7px;
            }
            .type,
            .hangye,
            .bigS {
              color: #333333;
              font-size: 13px;
              line-height: 18px;
              margin-bottom: 2px;
            }
            .bigS {
              margin: 0;
            }
          }
        }
        .place {
          margin-top: 10px;
          color: #333333;
          font-size: 13px;
          line-height: 18px;
          padding-bottom: 42px;
        }
      }
      .workList {
        li {
          cursor: pointer;
          background-color: #ffffff;
          padding: 16px 0 0px;
          align-items: center;
          margin-bottom: 16px;
          padding-bottom: 16px;
          border-bottom: 1px solid #eeeeee;
          .workmsg {
            .titleManey {
              display: flex;
              align-items: center;
              justify-content: space-between;
              .workTitle {
                color: #333333;
                font-size: 15px;
                line-height: 25px;
                font-weight: bold;
              }
              .maney {
                color: #ffbe37;
                font-size: 16px;
                line-height: 22px;
                font-weight: bold;
                margin-right: 22px;
              }
            }
            .welfare {
              display: flex;
              align-items: center;
              margin-top: 7px;
              P {
                color: #666666;
                font-size: 12px;
                line-height: 17px;
              }
              .fgx {
                margin: 0 15px;
              }
            }
          }
          .gsmsg {
            width: 337px;
            display: flex;
            padding-top: 16px;
            align-items: center;
            img {
              width: 50px;
              height: 50px;
            }
            .msg {
              flex: 1;
              padding-left: 19px;
              .title1 {
                color: #000000;
                font-size: 13px;
                line-height: 18px;
              }
              .navs {
                margin-top: 10px;
                color: #999999;
                font-size: 12px;
                line-height: 17px;
              }
            }
          }
          .relevantmsg {
            .class {
              display: flex;
              p {
                color: #333333;
                font-size: 14px;
                line-height: 26px;
              }
              .classLink {
                p {
                  color: #0d4fae;
                  text-decoration: underline;
                }
              }
            }
            .policy {
              margin-top: 8px;
              color: #000000;
              font-size: 12px;
              line-height: 17px;
              span {
                color: #0d4fae;
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
  }
}
/deep/p {
  font-family: PingFang SC !important;
}
// 修改框架样式
/deep/.ant-tabs-nav .ant-tabs-tab-active {
  font-size: 22px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}
</style>
